<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head"></head>
<body>
    <div class="wrapper">
        <div th:replace="fragments/sidebar"></div>
        <div id="content">
            <div id="invocationGrid" class="ag-theme-balham"></div>
        </div>
    </div>


    <div th:replace="fragments/js"></div>
    <script th:inline="javascript">

        function targetRenderer(params){
            return '<a href="/operation/'+  params.data.operationId + '">'+ params.value +'</a>'
        }
        const columnDefs = [
        {headerName: [[${invocationId}]],
        children: [
        { field: "target", resizable: true, cellRenderer: targetRenderer },
        { field: "mnemonic", resizable: true, width: 100},
        { field: "worker", resizable: true, width: 100},
        { field: "duration", resizable: true, width: 100},
        { field: "stage", resizable: true, width: 100},
        ]}];

        const rowData = JSON.parse([[${operation}]]);

        // let the grid know which columns and what data to use
        const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
            defaultColDef: {
                editable: true,
                sortable: true,
                filter: true,
                resizavle: true
            }
        };

        // setup the grid after the page has finished loading
        document.addEventListener('DOMContentLoaded', () => {
            const gridDiv = document.querySelector('#invocationGrid');
            new agGrid.Grid(gridDiv, gridOptions);
            gridOptions.api.setDomLayout('autoHeight');
            document.querySelector('#invocationGrid').style.height = ''
            gridOptions.api.sizeColumnsToFit();
            gridOptions.api.autoSizeColumns();
        });
    </script>
</body>
</html>